<template>
  <div class="index-container">
    <div class="search-container" ref="searchWarpRef">
      <a-form ref="formRef" :model="state.form">
        <a-row :gutter="16">
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" v-for="(item, index) in search" :key="index"
            v-show="index === 0 || state.isToggle">
            <a-form-item :label="item.label" :name="item.prop"
              :rules="[{ required: item.required, message: `${item.label}不能为空`, trigger: 'change' }]">
              <a-input v-if="item.type === 'input'" style="width: 100%" v-model:value="state.form[item.prop]"
                :placeholder="item.placeholder" />
              <a-input-number v-if="item.type === 'number'" style="width: 100%" v-model:value="state.form[item.prop]" />
              <a-select v-if="item.type === 'select'" style="width: 100%" v-model:value="state.form[item.prop]"
                :placeholder="item.placeholder">
                <a-select-option v-for="(op) in item.options" :key="op.value" v-model:value="op.value">{{ op.lable
                  }}</a-select-option>
              </a-select>
              <a-date-picker v-if="item.type === 'date'" style="width: 100%" v-model:value="state.form[item.prop]"
                :placeholder="item.placeholder" valueFormat="YYYY-MM-DD" />
              <a-time-picker v-if="item.type === 'time'" style="width: 100%" v-model:value="state.form[item.prop]"
                :placeholder="item.placeholder" valueFormat="HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <a-form-item>
              <a-button type="text" @click="onMore" style="color: #888888;">
                更多
                <template #icon>
                  <DownOutlined v-if="!state.isToggle" />
                  <UpOutlined v-else />
                </template>
              </a-button>
              <a-button type="text" @click="onSearch(formRef)" style="color: #888888;">
                搜索
                <template #icon>
                  <SearchOutlined />
                </template>
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-divider />
      <moreBtn :moreBtn="props.moreBtn" @zhiweibiangen="onZhiweibiangen" @bumenbiandong="onBumenbiandong"
        @daoru="onDaoru" @daochu="onDaochu" @xinzeng="onXinzeng" @lizhi="onLizhi" @shanchu="onShanchu"
        @shuaxin="onShuaxin" />
    </div>
    <div class="table-container">
      <a-table :rowKey="config.rowkey" :pagination="false" :columns="header" :data-source="data"
        :loading="config.loading" :bordered="config.isBorder" :row-selection="config.isSelection ? rowSelection : null"
        :scroll="{ y: `calc(100vh - ${256 + 12 + state.searchHeight}px)` }">
        <template #bodyCell="{ column, record, index }">
          <!-- （复杂样式使用插槽） -->

          <!-- <template v-if ="column.dataIndex === 'state'">
        <a-tag>{{ record.state===1?'成功':'失败' }}</a-tag>
        </template> -->

          <!-- （复杂样式使用插槽） -->

          <template v-if="column.dataIndex === 'operation'">
            <a-tag color="#2db7f5" size="small" type="primary" danger @click="onEditRow(record)">编辑</a-tag>
            <a-popconfirm title="是否删除?" @confirm="onDelRow(record.id)">
              <a-tag color="#108ee9" class="ml-1" size="small" type="primary" danger>删除</a-tag>
            </a-popconfirm>
          </template>
        </template>

      </a-table>
    </div>
    <div class="pagination-container">
      <a-pagination show-size-changer :current="state.page.pageNum" :pageSize="state.page.pageSize"
        :total="config.total" @change="onHandleCurrentChange" @showSizeChange="onHandleSizeChange" />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, nextTick, defineAsyncComponent } from 'vue';
const moreBtn = defineAsyncComponent(() => import('@/components/table/moreBtn.vue'));
const formRef = ref()
const searchWarpRef = ref()
const emit = defineEmits(['delRow', 'editRow', 'pageChange', 'sortHeader', 'selectCol', 'search', 'Shuaxin',
  'zhiweibiangen',
  'bumenbiandong',
  'daoru',
  'daochu',
  'xinzeng',
  'lizhi',
  'shanchu']);

type SearchOptionsType = {
  lable: string | number;
  value: string | number
}
type TableSearchType = {
  label: string;
  prop: string;
  type: string;
  required: boolean;
  placeholder?: string;
  options?: Array<SearchOptionsType>;
}

const props = defineProps({
  // 列表内容
  data: {
    type: Array,
    default: () => [],
  },
  // 表头内容
  header: {
    type: Array,
    default: () => [],
  },
  // 配置项
  config: {
    type: Object,
    default: () => { },
  },
  search: {
    type: Array<TableSearchType>,
    default: () => [],
  },
  moreBtn: {
    type: Array<string>,
    default: () => [],
  },
});

const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  },
  isToggle: false,
  selectlist: [],
  form: {},
  searchHeight: 82
});

const onMore = () => {
  state.isToggle = !state.isToggle
  nextTick(() => {
    state.searchHeight = searchWarpRef.value.clientHeight
  })
}

const onSearch = (formRef) => {
  console.log(state.searchHeight);

  if (!formRef) return;
  formRef.validate().then(() => {
    emit('search', state.form);
  }).catch(() => {
    return false;
  });
};

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    state.selectlist = selectedRows
    emit('selectCol', state.selectlist);
  },
};

const onDelRow = (row) => {
  emit('delRow', row);
};

const onEditRow = (row) => {
  emit('editRow', row);
};

const onHandleSizeChange = (current: number, size: number) => {
  state.page.pageSize = size;
  emit('pageChange', state.page);
};

const onHandleCurrentChange = (current: number, size: number) => {
  state.page.pageNum = current;
  emit('pageChange', state.page);
};

// @Zhiweibiangen="onZhiweibiangen"
// @Bumenbiandong="onBumenbiandong"
// @Daoru="onDaoru"
// @Daochu="onDaochu"
// @Xinzeng="onXinzeng"
// @Lizhi = "onLizhi"
// @Shanchu = "onShanchu"
const onZhiweibiangen = () => {
  emit('zhiweibiangen');
}
const onBumenbiandong = () => {
  emit('bumenbiandong');
}
const onDaoru = () => {
  emit('daoru');
}
const onDaochu = () => {
  emit('daochu');
}
const onXinzeng = () => {
  emit('xinzeng');
}
const onLizhi = () => {
  emit('lizhi');
}
const onShanchu = () => {
  emit('shanchu');
}
const onShuaxin = () => {
  emit('Shuaxin');
}

</script>
<style scoped lang='less'>
.index-container {
  display: flex;
  flex-direction: column;

  height: calc(100vh - 146px);

  .table-container {
    flex: 12;

    :deep(.ant-table-column-sorter) {
      color: #fff;
    }

    :deep(.ant-table-thead .ant-table-cell) {
      background-color: #9EC0EE !important
    }

    :deep(.ant-table-thead .ant-table-cell) {
      font-weight: 900;
    }

    :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
      background-color: #D6E5F9 !important;
    }

    :deep(.ant-table-tbody td.ant-table-cell-row-hover) {
      background-color: #D6E5F9 !important;
    }
  }

  .pagination-container {
    flex: 1;
    padding-top: 15px;
  }
}

:deep(.ant-divider) {
  margin: 0 0 10px;

}
</style>